<template>
  <div class="icons">
    <div class="icon-box" v-for="item of icons" :key="item.id">
      <div @click="shareClick" v-if="item.link === 'share'">
        <img class="icon-img" :src="item.imgUrl" :alt="item.name">
        <p class="icon-name">{{item.name}}</p>
      </div>
      <div @click="evClick" v-else-if="item.link === 'evenyou'">
        <img class="icon-img" v-lazy="item.imgUrl" :alt="item.name">
        <p class="icon-name">{{item.name}}</p>
      </div>
      <router-link tag="div" :to="item.link" v-else>
        <img class="icon-img" v-lazy="item.imgUrl" :alt="item.name">
        <p class="icon-name">{{item.name}}</p>
      </router-link>
    </div>
    <div v-show="shareIcon" @click="shareClick" class="animated sharebg sharebg-active"></div>
    <transition enter-active-class="fadeInUp" leave-active-class="fadeOutDown">
      <div v-show="shareIcon" class="share-dialog">
        <div class="share-tit">
          <img class="share-img" :src="imgtx" alt="">
        </div>
        <div class="share-xian"></div>
        <div class="share-body">
          <!-- <img src="/static/img/ewm.png" alt=""> -->
          <div id="qrcode"></div>
          <div><p class="share-p">ID:{{personalCode}}</p></div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'HomeIconsOne',
  props: {
    icons: Array
  },
  data () {
    return {
      shareIcon: false,
      personalCode: '',
      imgtx: ''
    }
  },
  methods: {
    getInfo () {
      if (this.$store.state.userId) {
        // console.log(this.$store.state.userId)
        let code = JSON.parse(this.$store.state.token)
        this.personalCode = code.personalCode
        this.imgtx = code.img
        // console.log(code.personalCode)
      }
    },
    evClick () {
      window.location.href = 'https://evenyou.meimai94buy.com/addons/index.php/micro_broadcast/User/index?customer_id=41&code=0010iUx21lLw1Q1SWEw211G5y210iUxN&state='
    },
    shareClick () {
      if (!this.$store.state.userId) {
        this.$router.push('/login')
      } else {
        // if (this.shareIcon === false) {
        //   this.$router.push({path: '/', query: {shareId: this.personalCode}})
        // } else {
        //   this.$router.push('/')
        // }
        this.shareIcon = !this.shareIcon
      }
    },
    qrcode () {
      let qrcode = new QRCode('qrcode', {
        width: 80,
        height: 80, // 高度
        text: window.location.href // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      })
      console.log(qrcode)
      // console.log(window.location.href)
    }
  },
  mounted () {
    this.getInfo()
    this.qrcode()
  }
}
</script>

<style lang="stylus" scoped>
#qrcode
  text-align: center
  display: inline-block
.sharebg-active
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  display: block
  z-index: 1100
  background: url(/static/img/share-bg.png) right .5rem top .5rem no-repeat rgba(0, 0, 0, 0.7)
  float:right;
  background-size: 4.2rem
  opacity: 1
.share-dialog
  z-index: 4999
  position: fixed
  margin: auto
  left: .3rem
  right: .3rem
  top: 0
  bottom: 0
  width: 6rem
  height: 6rem
  background: url(/static/img/sharebg.jpg)
  background-size: 100%
  .share-tit
    text-align: center
    .share-img
      border-radius: 50%
      width: 1.5rem
      height: 1.5rem
      margin: 1.2rem auto 0
      border: .04rem solid #fff
  .share-xian
    border-bottom: .02rem dotted #ec2935
    margin: 0.15rem 1.1rem 0
  .share-body
    color: #fff
    text-align: center
    margin-top: .2rem
    .share-p
      line-height: .5rem
      font-size: .26rem
      margin-bottom: .3rem
      background: url(/static/img/share-button.png) no-repeat
      background-size: 100%
      display: inline-block
      width: 2.6rem
      height: .6rem
      margin-top: .2rem
    img {
      width: 1.6rem
      height 1.6rem
    }
.icon-box
  width: 20%
  float: left
  overflow: hidden
  height: auto
  .icon-img
    width: 0.54rem
    height: 0.54rem
    display: block
    margin: 0.32rem auto 0
  .icon-name
    font-size: 0.26rem
    color: #333333
    text-overflow: clip
    white-space: nowrap
    overflow: hidden
    line-height: 0.8rem
    height: 0.8rem
    text-align: center
</style>
